<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 核心包 -->
    <script src="../react18/react.development.js"></script>
    <!-- 操作Dom的包 -->
    <script src="../react18/react-dom.development.js"></script>
    <style>
        .outer {
            width: 400px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script>
        /*  React对象上有一个createElement方法可以创建虚拟DOM
        - 参数1:元素名称
        - 参数2:元素上的属性,对象类型
        - 参数3....n:都是元素的子节点
         */
        // 创建虚拟dom
        // const vDOM = React.createElement("div", {
        //     className: "outer"
        // }, "hellow vDOM", "hello word")
        // // 创建容器并渲染虚拟DoM
        // ReactDOM.createRoot(document.getElementById("app")).render(vDOM)
        /* 
                // c创建虚拟dom
                const vdom = React.createElement("div", {
                    className: "outer"
                }, "hello,react")
                // 创建容器
                ReactDOM.createRoot(document.getElementById("app")).render(vdom)
         */

        /*   const vdom = React.createElement("div", {
            className: "outer"
        }, "helloreact")
        ReactDOM.createRoot(document.getElementById("app")).render(vdom)
 */

        const vdom = React.createElement("div", {
            className: "outer"
        }, "hello", "word", "good")
        ReactDOM.createRoot(document.getElementById("app")).render(vdom)
    </script>
</body>

</html>